<template>
	<div class="card-style" :style="{ width: `${!isFull ? '24.2%' : '19.2%'}` }">
		<div class="card-style-top">
			<div class="card-style-top-left">
				<div class="card-style-top-left-info1">
					<div>
						<img v-if="deviceCodeState == '运行'" src="../images/light-1.png" />
						<img v-else-if="deviceCodeState == '告警' || deviceCodeState == '待机'" src="../images/light-2.png" />
						<img v-else-if="deviceCodeState == '停机'" src="../images/light-3.png" />
						{{ info1 }}
					</div>
					<div class="card-style-top-left-info2" style="font-weight: 400; flex: 1; text-align: center">停机原因:{{ reasonShutdown }}</div>
					<Tag :color="currentStateColor[currentState]">{{ info4 }}</Tag>
					<div></div>
				</div>
				<div class="card-style-top-left-info2">{{ info2 }}(剩余{{ info14 }}条工单) 工单号:{{ workCode }}</div>
				<div class="card-style-top-left-info2"></div>
				<div class="card-style-top-left-info3">预计完工时间：{{ info3 }}</div>
			</div>
		</div>
		<div class="card-style-bottom">
			<div class="card-style-bottom-left">
				<div class="card-style-bottom-left-card">
					<div class="card-style-bottom-left-card-info5">{{ info5 }}</div>
					<div class="card-style-bottom-left-card-info6">{{ info6 }}</div>
					<div class="card-style-bottom-left-card-info7">{{ info7 }}</div>
				</div>
				<div class="card-style-bottom-left-card">
					<div class="card-style-bottom-left-card-info8">{{ info8 }}</div>
					<div class="card-style-bottom-left-card-info9">{{ info9 }}</div>
					<div class="card-style-bottom-left-card-info10">{{ info10 }}</div>
				</div>
			</div>
			<div class="card-style-bottom-right">
				<Chart2 v-if="refName" :ref="refName" :qualifiedQuantity="info11 - 0" :planProduceQuantity="info12 - 0" :qualifiedRate="info13 - 0" />
			</div>
		</div>
	</div>
</template>

<script>
import Tag from '@/components/dataBoard/components/tag/index.vue';
import Chart2 from '../components/chart2.vue';

export default {
	components: { Tag, Chart2 },
	props: [
		'deviceCodeState',
		'info1',
		'info2',
		'info3',
		'info4',
		'currentState',
		'info5',
		'info6',
		'info7',
		'info8',
		'info9',
		'info10',
		'info11',
		'info12',
		'info13',
		'info14',
		'reasonShutdown',
		'workCode',
		'refName',
	],
	computed: {
		isFull() {
			return this.$store.state.fullScreenState;
		},
	},
	data() {
		return {
			currentStateColor: {
				下发: '#3574f8',
				生产: '#60cb8f',
				中断: '#f5bf41',
				暂停: '#f17a7c',
				无工单: '#d6dbe2',
			},
		};
	},
	// watch: {
	// 	info12() {
	// 		this.$refs[this.refName].initChart();
	// 	},
	// },
};
</script>

<style scoped lang="scss">
.card-style {
	box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.14);
	padding: 10px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	// width: 19.2%;
	// width: 24%;

	.card-style-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.card-style-top-left {
			flex: 1;
			.card-style-top-left-info1 {
				font-size: 12px;
				font-weight: bold;
				display: flex;
				align-items: center;
				img {
					width: 14px;
					height: 14px;
				}
			}
			.card-style-top-left-info2 {
				font-size: 12px !important;
				color: black;
				// line-height: 27px;
			}
			.card-style-top-left-info3 {
				font-size: 12px;
				color: #999;
			}
		}
		.card-style-top-right {
		}
	}
	.card-style-bottom {
		margin-top: 5px;
		display: flex;
		width: 100%;
		.card-style-bottom-left {
			flex: 1;
			// width: 120px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			.card-style-bottom-left-card {
				background: linear-gradient(to right, #f4f7fc, #eff4fa);
				box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.04);
				padding: 7px;
				border-radius: 5px;
				.card-style-bottom-left-card-info5 {
					color: #59bb9b;
					font-size: 12px;
					font-weight: bold;
				}
				.card-style-bottom-left-card-info6 {
					color: #999;
					font-size: 10px;
				}
				.card-style-bottom-left-card-info7 {
					color: #999;
					font-size: 10px;
				}
				.card-style-bottom-left-card-info8 {
					color: #6190e0;
					font-size: 12px;
					font-weight: bold;
				}
				.card-style-bottom-left-card-info9 {
					color: #999;
					font-size: 10px;
				}
				.card-style-bottom-left-card-info10 {
					color: #999;
					font-size: 10px;
				}
			}
		}
		.card-style-bottom-right {
			align-items: center;
			display: flex;
			justify-content: center;
			text-align: center;
			flex: 1;
		}
	}
}
</style>
